package templa

import (
	"strconv"
	"github.com/go-fuego/fuego/examples/full-app-gourmet/store"
	"github.com/go-fuego/fuego/examples/full-app-gourmet/templa/components"
)

type SearchFilters struct {
	MaxTime     int
	MaxCalories int
	Categories  []string
	Ingredients []string
}

type SearchProps struct {
	Search  string
	Filters SearchFilters
	Recipes []store.Recipe
}

templ Search(props SearchProps) {
	<div class="flex flex-col gap-4">
		<h1 class="text-center">
			if props.Search != "" {
				Search results for <strong>{ props.Search }</strong>
			} else {
				All recipes
			}
		</h1>
		<div class="flex flex-col gap-2 md:gap-6 m-4 mb-8">
			<div class="flex items-center w-full gap-6 rounded-md border border-zinc-200 dark:border-zinc-700 p-4">
				<strong>Filters</strong>
				if props.Filters.MaxTime > 0 {
					<span class="whitespace-nowrap text-sm p-1 px-2 bg-zinc-200 dark:bg-zinc-900 shadow rounded">Max: { strconv.Itoa(props.Filters.MaxTime) }min</span>
				}
				if props.Filters.MaxCalories > 0 {
					<span class="whitespace-nowrap text-sm p-1 px-2 bg-zinc-200 dark:bg-zinc-900 shadow rounded">Max: { strconv.Itoa(props.Filters.MaxCalories) }cal</span>
				}
				<select class="input w-full rounded-md border border-zinc-200 dark:border-zinc-700 p-2">
					<option value="">All categories</option>
					for _, category := range props.Filters.Categories {
						<option value="{ category }">{ category }</option>
					}
				</select>
				<select class="input w-full rounded-md border border-zinc-200 dark:border-zinc-700 p-2">
					<option value="">All categories</option>
					for _, category := range props.Filters.Categories {
						<option value="{ category }">{ category }</option>
					}
				</select>
			</div>
			<div id="search-results" class="grid gap-4 md:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-2 md:my-6">
				for _, recipe := range props.Recipes {
					@components.Card(components.CardProps{
						Title: recipe.Name,
						WhenToEat: recipe.WhenToEat,
						Link: "/recipes/" + recipe.ID,
						ImageURL: recipe.ImageUrl,
						Body: recipe.Description,
					})
				}
			</div>
		</div>
	</div>
}
